<template>
	<view>
		<view>
			<table-title content="收费服务申请表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<!-- <view-item name="申请人" :value="userMsg.userName"></view-item> -->
				<!-- <view-item name="手机号码" :value="userMsg.userPhone"></view-item> -->
				<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor"></view-item>
				<view-item name="房间号" :value="userMsg.userRoom" :isLast="true"></view-item>
			</view>
			<small-title content="收费服务信息"></small-title>
			<view class="goods-title">名称：{{goodsName}}</view>
			<image class="goods-image" :src="goodsImg" mode="scaleToFill" @tap='chooseImage'></image>
			<view class="goods-title">描述：{{goodsDetail}}</view>
			<view class="goods-title">费用：{{goodsUnitPrice}}元</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="userRightDetail.costService.right && status===0" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="start" >确认开始服务</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="open">驳回并退款</button>
				</view>
			</view>
			<view v-if="userRightDetail.costService.right && status===1" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="end" >确认服务完成</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="input" message="成功消息" title="请输入驳回理由" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE_2,
		syncGetOrder,
		syncGoodsInfo,
	} from "../../../util/network.js"
	import {
		processHistoryList,
		getNowFormatDate,
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				status:-1,
				recordId: -1,
				processNo:'待分配',
				state: '',
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				serviceId:0,
				goodsName:"",
				goodsDetail:"",
				goodsNum:1,
				goodsUnitPrice:0,
				allPrice:0,
				goodsImg:"",
				borrowDate:"",
				payway: [true, false],                                                            //支付方式
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],
				proccessListDefult:[],
				token:'',
				nopassReasons:'楼层管家已完成服务',
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
				if(value == ""){
					uni.showModal({
						content:'理由不能为空',
						showCancel:false
					});
					this.$refs.popup.close()
				}else{
					if(this.userRightDetail.knotCommission.primeAuth == 1){
						this.nopassReasons = "运营主管已驳回服务申请，原因：" + value
					}else{
						this.nopassReasons = "楼层管家已驳回服务申请，原因：" + value
					}
					this.refund(this.processNo,'Charge service cancellation',0.01)
					// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
					// ...
					this.$refs.popup.close()
				}
			},
			refund(processNo,reason,refundAmount){
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/pay/refund`,
					header: {
						'Authorization': this.token,
					},
					data: {
						processNo:processNo,
						reason:reason,
						refundAmount:Number(this.allPrice),                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("会议室预约退款调用",res)
						if(res.data.code == 200){
							_this.reject()
						}else{
							uni.showModal({
								content:'退款调用失败,请联系IT人员',
								showCancel:false
							})
						}
					},
					fail: (res) => {
						console.log("会议室预约退款调用失败")
					}
				})
			},
			chooseImage(){
				uni.previewImage({
					current: 0,
					urls: [this.goodsImg]
				})
			},
			
			start(){
				console.log("[info]","确认开始服务：" + this.recordId)
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					this.nopassReasons = "运营主管已确认开始服务"
				}else{
					this.nopassReasons = "楼层管家已确认开始服务"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/paid-service-application/start/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("确认开始服务成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("确认开始服务调用失败")
					}
				})
			},
			end(){
				console.log("[info]","完成服务：" + this.recordId)
				if(this.userRightDetail.knotCommission.primeAuth == 1){
					this.nopassReasons = "运营主管已确认完成服务"
				}else{
					this.nopassReasons = "楼层管家已确认完成服务"
				}
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/paid-service-application/end/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("完成服务成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("完成服务调用失败")
					}
				})
			},
			reject(){
				console.log("[info]","驳回服务：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/paid-service-application/reject/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: this.nopassReasons,                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("完成服务成功",res);
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("驳回服务调用失败")
					}
				})
			},
			async loadImg(chargeFileId){
				const res = await uni.downloadFile({
					url:`${ONLINE_SERVER_ADDRESS_BASE_2}/file/download/` + chargeFileId,
					header: {
						'Authorization': this.token,
					},
				})
				return new Promise((resolve, reject) => {
				        resolve(res[1].tempFilePath)
				})
			},
			getServiceInfo(serviceId){
				let b = syncGetOrder("paid-service/show/" + serviceId)
				b.then((res)=>{
					 console.log("收费服务异步",res)
					 if(res.data.code == 200){
						 this.goodsName = res.data.data.title
						 this.goodsDetail = res.data.data.intro
						 this.goodsUnitPrice = res.data.data.price
						 this.allPrice = this.goodsUnitPrice
						 let b = this.loadImg(res.data.data.picture)
						 b.then((v)=>{
						 	this.goodsImg = v
						 })
						 this.$forceUpdate()
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("paid-service-application/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("物品订单异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						 	 case 0:
						 		this.state = "待管家确认"
						 		break;
						 	 case 1:
						 		this.state = "服务进行中"
						 		break;
						 	 case 2:
						 		this.state = "待确认完成"
						 		break;
						 	 case 3:
						 		this.state = "服务已完成"
						 		break;
						 	 case 4:
						 		this.state = "已退款"
						 		break;
						      default:
						         this.state = "待申请"
						 } 
						 this.userMsg.userCompany = res.data.data.createUserInfo.name
						 this.userMsg.userBuilding = res.data.data.createUserInfo.title
						 this.userMsg.userFloor = res.data.data.createUserInfo.floor
						 this.userMsg.userRoom = res.data.data.createUserInfo.houseNumber
						 this.allPrice = res.data.data.price
						 this.processNo = res.data.data.processOn
						 this.proccessListDefult=processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
						 this.serviceId = res.data.data.paidServiceId
						 this.getServiceInfo(this.serviceId)
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			if(uni.getStorageSync('userinfo') != null){
				this.userRightDetail = uni.getStorageSync("userRight")
				this.recordId = option.id
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			this.getOrder()
		}
	}
</script>

<style>
	page{
		background-color: #ffffff
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.goods-image{
		margin: 20rpx 0 20rpx 50rpx;
		width: 200rpx;
		height: 200rpx;
	}
	.goods-title{
		margin: 10rpx 0 10rpx 50rpx;
		font-size: 20rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 650rpx;
	}
</style>
